<template>
  <div>
    <!-- $nextTick的使用场景：让输入框自动聚焦
      需求：默认情况按钮显示，输入框隐藏
            点击按钮，显示输入框，并自动聚焦，按钮隐藏

      功能拆解：
        1、控制输入框的显示隐藏
        2、控制输入框自动聚焦
     -->
    <h1>4、$nextTick的使用场景</h1>
    <div>
      <input ref="inp" v-if="bool" type="text" placeholder="关键词">
      <button v-else @click="btn">点击搜索</button>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      bool: false
    }
  },
  methods: {
    btn(){
      this.bool = true
      // 表单自动聚焦方法：focus
      // this.$refs.inp.focus() // 报错
      // 因为DOM更新是异步的，获取不到输入框
      // console.log(this.$refs.inp); // undefined
      // 如何解决呢？ 答：使用$nextTick
      this.$nextTick(()=>{
        this.$refs.inp.focus()
      })
    }
  }
}
</script>

<style>

</style>